<template>
	<view class="page">
		<view class="navbar" v-if="list.length>0">
			{{current+1}}/{{list.length}}
		</view>
		<view class="content" v-if="list.length>0">
			<view class="swiper">
				<swiper class="swiper-box" :current="current" @change="changeSwiper">
					<swiper-item class="swiper-list" v-for="(item,index) in list" :key="index">
						<view class="swiper-item">
							<view class="q-box">
								<view class="question" :class="item.inp==1?'y':(item.inp==2?'n':'')">
									<text v-for="(w,i) in item.inpAll" :key="i">{{w}}</text>
									<text class="wz" v-for="(num,i) in (item.name.length-item.inpAll.length)" :key="i"></text>
									<view class="d_flex_c cz" @click="reset(item)"><u-icon name="reload" size="15" color="#999"></u-icon>重置</view>
								</view>
								<view class="mean">
									<text>{{item.cx}}{{item.title}}</text>
								</view>
							</view>
							<view class="answer">
								<view :class="a.checked?'item ac':'item'" v-for="(a,i) in item.opt" :key="i" @click="chooseItem(a,item)">{{a.value}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="no-data" v-else-if="list.length==0&&noData">
			<u-empty mode="list" text="暂无题目数据" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<uni-popup ref="popup" type="bottom" :is-mask-click="false" :safe-area="false" :mask-background-color="'rgba(0,0,0,0)'">
			<view class="pop-con" @touchstart="touchstart" @touchmove="touchmove">
				<view class="explain" :style="{height:height}">
					<Explain :detail="detail" :id="curId" @updateData="getDetail"></Explain>
				</view>
				<view class="btn-box">
					<view class="btn" @click="next">下一题</view>
				</view>
				<!-- <view class="explain" @click="toExplain">查看解析</view> -->
			</view>
		</uni-popup>
		<uni-popup ref="next" type="center">
			<view class="pop-cen">
				<view class="tip">
					真棒！已完成复习单词，是否继续复习？
				</view>
				<view class="btn-box">
					<view class="btn" @click="toIndex">休息一下</view>
					<view class="btn ac" @click="updateWord">我要继续</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Explain from './explain1.vue';
  import {handleExampleSentence} from "@/util/bizUtil";

  export default {
		components:{
			Explain
		},
		data() {
			return {
				innerAudioContext:'',
				list:[],
				current:0,
				noData:false,
				curId:'',
				detail:'',
				initY:0,
				height:'200rpx'
			};
		},
		onLoad() {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			this.getList();
		},
		onShow() {
			// if(uni.getStorageSync('lxCurrent')===0||uni.getStorageSync('lxCurrent')){
			// 	let lxCur=uni.getStorageSync('lxCurrent');
			// 	if(lxCur<this.list.length-1){
			// 		this.current++
			// 	}else{
			// 		this.$refs.next.open();
			// 	}
			// 	uni.removeStorageSync('lxCurrent')
			// }
		},
		methods:{
			touchstart(e){
				this.initY = e.touches[0].pageY;
			},
			touchmove(e){
				let lastY = e.touches[0].pageY;
				console.log(lastY)
				console.log(this.initY)
				if (lastY - this.initY< -20) {
					this.height="calc(100vh - 310rpx)"
				}else if(lastY - this.initY > 20){
					this.height="200rpx"
				}
			},
			getList(){
				uni.showLoading();
				this.$http.get1('api/client/word/graspToday',{
					source:4
				}).then(res=>{
					uni.hideLoading();
					if(res.code==200){
						 let arryNew = []
						res.data.map((item, index) => {
							let _opt = this.getSort(item.name)
							let _title = JSON.parse(item.wordExplain)[0] &&  JSON.parse(item.wordExplain)[0].chinExplain
							let cx = JSON.parse(item.wordExplain)[0] &&  JSON.parse(item.wordExplain)[0].wordSex
							arryNew.push(Object.assign({}, item, {
								inp: '',
								inpAll: [],
								title: _title,
								cx: cx,
								opt: _opt,
								len: false
							}))
						})
						this.list=arryNew;
						this.current=0;
						if(res.data.length==0){
							this.noData=true;
						}
					}
				})
			},
			changeSwiper(e){
				this.current=e.detail.current;
			},
			getSort(words) {
			 return  words.split('').sort(() => {
					return parseInt(Math.random() * (3 - 1 + 1) + 1, 10) - 2
				}).map((v, i) => {
					return {
						id: i,
						value: v,
						checked: false
					}
				})
		   
			},
			chooseItem(a,item){
				if(!a.checked){
					a.checked=true;
					item.inpAll.push(a.value);
				}
				if(item.inpAll.length==item.name.length){
					console.log(item)
					this.curId=item.id;
					this.getDetail();
					if(item.inpAll.join('')==item.name){
						this.$refs.popup.open();
						item.inp=1;
					}else{
						item.inp=2;
						this.$refs.popup.open()
						// setTimeout(()=>{
						// 	uni.navigateTo({
						// 		url:'/pages/test/explain?id='+item.id+'&type=1&current='+this.current
						// 	})
						// },1500)
					}
					this.updateWordStatus(item);
					// this.markWord(item.id,item.inp==1);
				}
			},
			//标记单词
			markWord(id,answer){
				this.$http.get1('api/client/word/signWord',{
					wordId:id,
					source:4,
					answer:answer?true:false,
					// date:new Date(),
				}).then(res=>{
					console.log(res);
				})
			},
			updateWordStatus(item){
				this.$http.get1('api/client/word/signWord',{
					wordId:item.id,
					source:4,
					answer:item.inp==1?true:false
				})
			},
			// 查看解析
			toExplain(){
				uni.navigateTo({
					url:'/pagesA/pages/test/explain?id='+this.list[this.current].id+'&type=1&current='+this.current
				})
			},
			//下一题
			next(){
				if(this.current<this.list.length-1){
					this.current++;
					this.$refs.popup.close();
					this.height='200rpx'
				}else{
					this.$refs.next.open();
				}
			},
			closeCen(){
				this.$refs.next.close()
				this.$refs.popup.close()
			},
			toIndex(){
				uni.navigateBack();
			},
			updateWord(){
				this.getList();
				this.closeCen();
			},
			reset(item){
				item.inpAll=[];
				item.opt.map(val=>{
					val.checked=false;	
				})
			},
			getDetail() {
				this.$http.get1('/api/client/word/wordDetailById', {
					id: this.curId
				}).then(res => {
					if (res.code == 200) {
						this.detail = handleExampleSentence(res.data)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.navbar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 22rpx;
	color: #333333;
	text-align: center;
	height: 96rpx;
	background: #F9FBFF;
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42,65,152,0.05);
	line-height: 96rpx;
	position: fixed;
	z-index: 9;
	text{
		color: #5480F8;
		margin: 0 8rpx;
	}
}
.content{
	min-height: 100vh;
	padding-top: 120rpx;
	background-color: #F2F3F8;
	.swiper-box{
		height: calc(100vh - 180rpx);
		width: 750rpx;
		background-color: #F2F3F8;
		border-radius: 20rpx;
		box-sizing: border-box;
		.swiper-list{
			height: calc(100vh - 180rpx);
			padding:0 32rpx;
			box-sizing: border-box;
		}
	}
}
.swiper-item{
	height: 100%;
	padding:30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-sizing: border-box;
	.q-box{
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.question{
		text-align: center;
		margin-bottom: 40rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: #575A64;
		display: flex;
		justify-content: center;
		align-items: center;
		&.y{
			color: #20CE7C;
		}
		&.n{
			color: #FF7474;
		}
		.wz{
			width: 40rpx;
			border-bottom: 4rpx solid #333333;
			height: 50rpx;
			display: inline-block;
			margin: 0 4rpx;
		}
		.cz{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	.mean{
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.answer{
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fill, 140rpx);
		grid-gap: 20rpx;
		.item{
			width: 140rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1rpx solid #E4E5EC;
			text-align: center;
			line-height: 120rpx;
			font-size: 40rpx;
			color: #333333;
			&.ac{
				background: #5480F8;
				color: #fff;
			}
		}
	}
}
.pop-con{
	// height: 288rpx;
	width: 100%;
	background-color: #fff;
	padding: 30rpx 0;
	box-sizing: border-box;
	transition: all 600ms;
	border-radius: 20rpx 20rpx 0 0;
	.tip{
		font-size: 24rpx;
		color: #20CE7C;
		text-align: center;
	}
	.btn-box{
		height: 140rpx;
		border-top: 1rpx solid #eaeaea;
		padding:0 30rpx;
		box-sizing: border-box;
	}
	.btn{
		width: 680rpx;
		height: 90rpx;
		background: #5480F8;
		border-radius: 46rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 20rpx auto 30rpx;
	}
	.explain{
		transition: all 800ms;
		font-size: 24rpx;
		overflow: hidden;
		color: #5480F8;
		text-align: center;
	}
}
.pop-cen{
	width: 590rpx;
	background: #FCFDFF;
	border-radius: 20rpx;
	padding: 30rpx 40rpx 40rpx;
	box-sizing: border-box;
	.tip{
		margin: 40rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.btn-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn{
			width: 240rpx;
			height: 90rpx;
			border-radius: 46rpx;
			border: 2rpx solid #5480F8;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #5480F8;
			&.ac{
				background-color: #5480F8;
				color: #fff;
			}
		}
	}
}

</style>
